<template>
  <view class="content">
    <view class="header">
      <image class="bg" src="https://ainengli.hzjrsw.com/jkhx/loginBg.png" />
      <text class="title">美联智能体重管理</text>
      <text class="nickname">美联AI生活方式体重管理，健康享瘦美好生活</text>
    </view>
    <view class="form">
      <view class="item">
        <text class="name">手机号</text>
        <input
          class="input"
          type="tel"
          :disabled="userInfo.phone"
          v-model="state.telPhone"
          placeholder="请输入手机号"
        />
      </view>
      <view class="item itemCode">
        <text class="name">验证码</text>
        <input
          class="input"
          maxlength="6"
          type="Number"
          v-model="state.code"
          placeholder="请输入验证码"
        />
        <text v-if="state.isClick" class="send" @tap="sendFun">发送验证码</text>
        <text v-else class="send on">重新获取（{{ state.time }}）</text>
      </view>
    </view>
    <view class="btn">
      <text :class="['login', state.telPhone && state.code ? '' : 'on']" @tap="sure"
        >登录/注册</text
      >
      <text @tap="quit" class="register">暂不登录/注册</text>
    </view>
    <view class="protocol">
      <image
        v-if="state.showPopover"
        @tap="readFun"
        class="img"
        src="@/static/image/checkbox.png"
      />
      <image v-else @tap="readFun" class="img" src="@/static/image/checkbox-active.png" />
      <text class="agree" @tap="readFun">我已阅读并同意</text>
      <text class="protocolTitle" @tap="protocolFun">《体重管理服务协议》</text>
      <text class="privacy" @tap="privacyFun">《隐私协议》</text>
    </view>
    <!-- <up-modal
      :show="state.showPopup"
      :title="state.title"
      :closeOnClickOverlay="true"
      :showConfirmButton="false"
      @close="close"
      class="modalWrap"
    >
      <view class="modal">
        <view class="title">用户隐私保护提示</view>
        <view class="modalContent">
          在您使用健康画像服务之前，请仔细阅读《健康画像小程序隐私保护指引》如你同意该指引，请点击“同意”开始使用本小程序。
        </view>
        <view class="agree" @tap="agree">同意</view>
        <view class="refuse" @tap="close">拒绝</view>
      </view>
    </up-modal> -->
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { sendPhoneCode, phoneLogin, getDefault } from '@/api/login/index'
import { base_info } from '@/api/moreMessage'
import { onLoad, onHide, onShow } from '@dcloudio/uni-app'
import store from '@/store'

const state = reactive({
  showPopover: true,
  showPopup: false,
  title: '',
  telPhone: '',
  code: '',
  time: '',
  isClick: true,
  timeQuestions: null
})
const userInfo = ref({})
onLoad(() => {
  init()
})
onShow(() => {
  if (uni.hideHomeButton) {
    uni.hideHomeButton()
  }
})
onHide(() => {
  clearInterval(state.timeQuestions)
  state.timeQuestions = null
  state.isClick = true
})
const init = () => {
  state.telPhone = store.state.userInfo.phone || ''
  userInfo.value = store.state.userInfo
}
const readFun = () => {
  state.showPopover = !state.showPopover
}
const protocolFun = () => {
  //   state.showPopup = true
  //   uni.navigateTo({
  //     url: '/pages/login/guide'
  //   })
  uni.navigateTo({
    url: '/packA/pages/login/healthManage'
  })
}
const privacyFun = () => {
  uni.navigateTo({
    url: '/packA/pages/login/privacy'
  })
}

// const agree = () => {
//   state.showPopover = false
//   state.showPopup = false
// }
// const close = () => {
//   state.showPopup = false
// }
const sendFun = () => {
  const phoneReg = /^1[3456789]\d{9}$/
  if (state.showPopover == true) {
    uni.showToast({
      title: '请勾选《体重管理服务协议》和《隐私协议》',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (phoneReg.test(state.telPhone)) {
    uni.showLoading({
      title: '加载中'
    })
    const param = {
      ...userInfo.value,
      phone: state.telPhone
    }
    sendPhoneCode(param).then((res: any) => {
      uni.hideLoading()
      if (res.code == 0) {
        sendVerifyCode()
        // 后期上线需要隐藏
        uni.showToast({
          title: '验证码:' + res.data,
          duration: 3000
        })
      } else {
        state.time = ''
        state.isClick = true
        clearInterval(state.timeQuestions)
        state.timeQuestions = null
      }
    })
  } else {
    if (!state.telPhone) {
      uni.showToast({
        title: '手机号码不能为空',
        icon: 'none',
        //显示持续时间为 2秒
        duration: 2000
      })
    } else {
      uni.showToast({
        title: '手机号码格式不正确',
        icon: 'none',
        //显示持续时间为 2秒
        duration: 2000
      })
    }
  }
  return true
}
const sendVerifyCode = () => {
  if (state.isClick == true) {
    state.isClick = false
    let s = 60
    state.time = s + 's'
    state.timeQuestions = setInterval(() => {
      s--
      state.time = s + 's'
      if (s < 0) {
        state.time = ''
        state.isClick = true
        clearInterval(state.timeQuestions)
      }
    }, 1000)
  }
}
const sure = () => {
  const phoneReg = /^1[3456789]\d{9}$/
  if (state.showPopover == true) {
    uni.showToast({
      title: '请勾选《体重管理服务协议》和《隐私协议》',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (phoneReg.test(state.telPhone)) {
    if (state.code == '') {
      return false
    } else {
      userInfo.value.phone = state.telPhone
      userInfo.value.code = state.code
      uni.showLoading({
        title: '登录中...'
      })
      phoneLogin(userInfo.value).then((res) => {
        uni.hideLoading()
        // console.log('登录成功', res.data)
        if (res.code == 0) {
          userInfo.value = res.data
          store.commit('SET_USERINFO', userInfo.value)
          if (!userInfo.value.isVerified) {
            uni.redirectTo({
              url: '/pages/login/realName'
            })
          } else {
            getDefault(userInfo.value.userId).then((res) => {
              userInfo.value.patientInfo = Object.assign({}, res.data)
              store.commit('SET_USERINFO', userInfo.value)
              uni.switchTab({
                url: '/pages/index/index'
              })
            })
          }
        }
      })
    }
    return true
  } else {
    if (!state.telPhone) {
      //
    } else {
      uni.showToast({
        title: '手机号码格式不正确',
        icon: 'none',
        //显示持续时间为 2秒
        duration: 2000
      })
    }
    return false
  }
}
const quit = () => {
  if (uni.getSystemInfoSync().uniPlatform == 'mp-weixin') {
    // 仅支持微信小程序
    uni.exitMiniProgram({
      success: function () {
        console.log('退出小程序成功')
      },
      fail: function (err) {
        console.error('退出小程序失败', err)
      }
    })
  } else {
    // 后续视情况退出应用
    uni.exit({
      success: function (res) {
        console.log(res)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #fff;

  .header {
    position: relative;
    height: 520rpx;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 520rpx;
    }

    .title {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin: 62rpx 48rpx 0;
      font-size: 50rpx;
      font-weight: 700;
      color: #222;
    }

    .nickname {
      position: relative;
      z-index: 2;
      display: block;
      margin: 32rpx 48rpx 0;
      font-size: 28rpx;
      color: #666;
    }
  }

  .form {
    position: relative;
    z-index: 2;
    padding: 48rpx 48rpx 0;
    margin-top: -260rpx;
    background: #fff;
    border-radius: 32rpx;

    .item {
      position: relative;
      border-bottom: 1px solid #e5e6eb;

      .name {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .input {
        height: 112rpx;
        font-size: 32rpx;

        ::v-deep .uni-input-placeholder {
          color: #999;
        }

        ::v-deep .uni-input-input {
          color: #222;
        }
      }

      &.itemCode {
        margin-top: 32rpx;

        .input {
          width: calc(100% - 232rpx);
        }

        .send {
          position: absolute;
          top: 50%;
          right: 0;
          padding: 36rpx 0 36rpx 24rpx;
          font-size: 32rpx;
          color: #00d1b6;
          transform: translateY(-32%);

          &.on {
            color: #999;
          }
        }
      }
    }
  }

  .btn {
    margin: 80rpx 48rpx 0;

    .login {
      display: block;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 96rpx;
      color: #fff;
      text-align: center;
      background: #00d1b6;
      border-radius: 48rpx;

      &.on {
        opacity: 0.5;
      }
    }

    .register {
      display: block;
      height: 96rpx;
      font-size: 28rpx;
      line-height: 96rpx;
      color: #999;
      text-align: center;
      border-radius: 48rpx;
    }
  }

  .protocol {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: calc(34rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(34rpx + env(safe-area-inset-bottom));
    font-size: 24rpx;
    color: #666;
    text-align: center;

    .img {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      padding-right: 10rpx;
      vertical-align: middle;
    }

    .agree {
      display: inline-block;
      vertical-align: middle;
    }

    .protocolTitle,
    .privacy {
      display: inline-block;
      color: #00d1b6;
      vertical-align: middle;
    }
  }

  .modal {
    .title {
      font-size: 36rpx;
      font-weight: 700;
      color: #1d2129;
      text-align: center;
    }

    .modalContent {
      margin-top: 16rpx;
      font-size: 30rpx;
      color: #4e5969;
    }

    .agree {
      height: 88rpx;
      margin: 40rpx auto 10rpx;
      font-size: 30rpx;
      line-height: 88rpx;
      color: #fff;
      text-align: center;
      background: #00d1b6;
      border-radius: 44rpx;
    }

    .refuse {
      height: 88rpx;
      font-size: 30rpx;
      line-height: 88rpx;
      color: #86909c;
      text-align: center;
      background: #fff;
      border-radius: 44rpx;
    }
  }
}
</style>
